<template>
  <el-card class="blog-card" :body-style="{ padding: '0px' }" @click="emit('click')">
    <div class="card-image">
      <img
        :src="article.image"
        :alt="article.title"
        loading="lazy"
        @load="emit('image-loaded')"
        @error="emit('image-error')"
      />
      <div v-if="loading" class="image-skeleton"></div>
    </div>
    <div class="card-content">
      <el-tag size="small" class="category-tag">
        {{ article.category }}
      </el-tag>
      <h3 class="card-title">{{ article.title }}</h3>
      <p class="card-excerpt">{{ article.excerpt }}</p>
      <div class="card-footer">
        <span class="publish-date">
          <el-icon><Calendar /></el-icon>
          {{ formatDate(article.date) }}
        </span>
        <span class="reading-time">
          <el-icon><Clock /></el-icon>
          {{ article.readingTime }} min read
        </span>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Calendar, Clock } from '@element-plus/icons-vue'

interface Article {
  id: number
  title: string
  excerpt: string
  category: string
  date: string
  readingTime: number
  image: string
}

defineProps({
  article: {
    type: Object as PropType<Article>,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['click', 'image-loaded', 'image-error'])

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })
}
</script>

<style scoped>
.blog-card {
  height: 100%;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-image {
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 20px;
}

.category-tag {
  margin-bottom: 10px;
}

.card-title {
  font-size: 1.2rem;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.card-excerpt {
  color: var(--el-text-color-regular);
  margin-bottom: 15px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  color: var(--el-text-color-secondary);
  font-size: 0.85rem;
}

.card-footer span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.image-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.1) 25%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s infinite;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 768px) {
  .card-image {
    height: 150px;
  }
}
</style>
